<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>${systemName}</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    <meta content="" name="description"/>
    <meta content="" name="author"/>

    <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
    <link href="<@sp.static/>/assets/plugins/jquery-ui/themes/base/minified/jquery-ui.min.css" rel="stylesheet"/>
    <link href="<@sp.static/>/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="<@sp.static/>/assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="<@sp.static/>/assets/css/animate.min.css" rel="stylesheet"/>
    <link href="<@sp.static/>/assets/css/style.min.css" rel="stylesheet"/>
    <link href="<@sp.static/>/assets/css/style-responsive.min.css" rel="stylesheet"/>
    <link href="<@sp.static/>/assets/css/theme/default.css" rel="stylesheet" id="theme"/>
    <link href="<@sp.static/>/assets/plugins/gritter/css/jquery.gritter.css" rel="stylesheet"/>
</head>

<body class="pace-top">
<!-- begin #page-loader -->
<div id="page-loader" class="fade in"><span class="spinner"></span></div>
<!-- end #page-loader -->

<div class="login-cover">
    <div class="login-cover-image"><img src="<@sp.static/>/assets/img/login-bg/image_2.jpg" data-id="login-cover-image"
                                        alt=""/></div>
    <div class="login-cover-bg"></div>
</div>
<!-- begin #page-container -->
<div id="page-container" class="fade">
    <!-- begin login -->
    <div class="login login-v2" data-pageload-addclass="animated fadeIn">
        <!-- begin brand -->
        <div class="login-header">
            <div class="brand">
                <span class="logo"></span> ${systemName}
                <small>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;学校管理服务平台</small>
            </div>
            <div class="icon">
                <i class="fa fa-cubes"></i>
            </div>
        </div>
        <!-- end brand -->
        <div class="login-content">
            <form action="${rc.contextPath}/login" method="POST" id="loginAction" name="loginAction"
                  class="margin-bottom-0">
                <input type="hidden" id="errorMessage" value="${loginError}"/>
                <div class="form-group m-b-20">
                    <input type="text" name="username" id="username" class="form-control input-lg" placeholder="帐号"/>
                </div>
                <div class="form-group m-b-20">
                    <input type="password" name="password" id="password" class="form-control input-lg"
                           placeholder="密码"/>
                </div>
                <div class="form-group m-b-20">
                    <img alt="验证码" src="${rc.contextPath}/captcha/getCode?math=" +Math.random()
                         width="118" height="46"
                         onclick="this.src='${rc.contextPath}/captcha/getCode?math='+Math.random()"/>

                    <div class="form-group m-b-20" style="float: left;margin-right:20px">
                        <input name="captcha" id="captcha" type="text" value="" placeholder="验证码"
                               class="form-control input-lg"/>
                    </div>
                </div>
                <div class="login-buttons">
                    <button type="button" onclick="formSubmit();" class="btn btn-success btn-block btn-lg">登 录</button>
                </div>
                <!--<div class="m-t-20" style="text-align: center">
                    &copy; Color Admin All Right Reserved 2018
                </div>-->
            </form>
        </div>
    </div>

    <!--<ul class="login-bg-list">
        <li class="active"><a href="#" data-click="change-bg"><img src="<@sp.static/>/assets/img/login-bg/bg-4.jpg" alt="" /></a></li>
        <li><a href="#" data-click="change-bg"><img src="<@sp.static/>/assets/img/login-bg/bg-2.jpg" alt="" /></a></li>
        <li><a href="#" data-click="change-bg"><img src="<@sp.static/>/assets/img/login-bg/bg-3.jpg" alt="" /></a></li>
        <li><a href="#" data-click="change-bg"><img src="<@sp.static/>/assets/img/login-bg/bg-1.jpg" alt="" /></a></li>
        <li><a href="#" data-click="change-bg"><img src="<@sp.static/>/assets/img/login-bg/bg-5.jpg" alt="" /></a></li>
        <li><a href="#" data-click="change-bg"><img src="<@sp.static/>/assets/img/login-bg/bg-6.jpg" alt="" /></a></li>
    </ul>-->
    <!-- end login -->
</div>
<script src="<@sp.static/>/assets/plugins/jquery/jquery-1.9.1.min.js"></script>
<script src="<@sp.static/>/assets/plugins/jquery/jquery-migrate-1.1.0.min.js"></script>
<script src="<@sp.static/>/assets/plugins/jquery-ui/ui/minified/jquery-ui.min.js"></script>
<script src="<@sp.static/>/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="<@sp.static/>/assets/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="<@sp.static/>/assets/plugins/gritter/js/jquery.gritter.js"></script>
<script src="<@sp.static/>/js/custom/message.js"></script>
<script src="<@sp.static/>/assets/js/apps.min.js"></script>
<script src="<@sp.static/>/js/custom/jsencrypt.min.js"></script>
<script>

    var handleLoginPageChangeBackground = function () {
        $('[data-click="change-bg"]').live('click', function () {
            var targetImage = '[data-id="login-cover-image"]';
            var targetImageSrc = $(this).find('img').attr('src');
            var targetImageHtml = '<img src="' + targetImageSrc + '" data-id="login-cover-image" />';

            $('.login-cover-image').prepend(targetImageHtml);
            $(targetImage).not('[src="' + targetImageSrc + '"]').fadeOut('slow', function () {
                $(this).remove();
            });
            $('[data-click="change-bg"]').closest('li').removeClass('active');
            $(this).closest('li').addClass('active');
        });
    };

    var LoginV2 = function () {
        "use strict";
        return {
            //main function
            init: function () {
                handleLoginPageChangeBackground();
            }
        };
    }();
    $(document).ready(function () {
        App.init();
        LoginV2.init();
        errorMsg('errorMessage');
    });

    function formSubmit() {
        if ($("#password").val() != '') {
            var encrypt = new JSEncrypt();
            encrypt.setPublicKey('${stringUtil.getPublicKey()}');
            var encrypted = encrypt.encrypt($("#password").val());
            $("#password").val(encrypted);
        }

        $("#loginAction").submit();
    }
</script>
</body>
</html>